<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="dependents/jquery/jquery.min.js"></script>
    <!-- DLShouWen Grid -->
    <script type="text/javascript" src="dlshouwen.grid.js"></script>
    <script type="text/javascript" src="i18n/zh-cn.js"></script>
    <!-- bootstrap -->
    <script type="text/javascript" src="dependents/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="dependents/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="dlshouwen.grid.min.css"/>
    <!--My97DatePicker-->
    <script type="text/javascript" src="dependents/datePicker/WdatePicker.js" defer="defer"></script>
    <link rel="stylesheet" type="text/css" href="dependents/datePicker/skin/WdatePicker.css"/>
    <link rel="stylesheet" type="text/css" href="dependents/datePicker/skin/default/datepicker.css"/>
    <!-- font-awesome -->
    <link rel="stylesheet" type="text/css" href="dependents/fontAwesome/css/font-awesome.min.css" media="all"/>
    <!-- doT.js -->
    <script type="text/javascript" src="../comment/doT.min.js"></script>
    <style>
        #columnsShow {
            width: 100%;
            padding: 20px;
        }
    </style>
</head>

<body>
<div>
    <button id="customeQueryBtn" class="btn btn-lg btn-default" type="button">自定义查询</button>
</div>
<div id="gridContainer" class="dlshouwen-grid-container"></div>
<div id="gridToolBarContainer" class="dlshouwen-grid-toolbar-container"></div>
<script id="columnsTmpl" type="text/x-dot-template">
    {{ for(var key in it){ }}
    <label>
        <input id="{{=it[key]['id']}}" name="columns" type="checkbox"> {{=it[key]['title']}}
    </label>
    {{ } }}
</script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="advance_query_b5921b2906487b4a15c2831c77fd10e5ModalLabel" aria-hidden="false"
     style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="advance_query_b5921b2906487b4a15c2831c77fd10e5ModalLabel"><i
                        class="fa fa-search"></i>&nbsp;&nbsp;高级查询</h4></div>
            <div class="modal-body advance-query">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="active"><a href="#showColumns" role="tab"
                                          data-toggle="tab">显示字段</a></li>
                    <li class=""><a href="#showConditions" role="tab"
                                    data-toggle="tab">查询条件</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="showColumns">
                        <div class="panel panel-default">
                            <div class="clearfix"></div>
                            <div id="columnsShow" class="checkbox">
                                <br/>
                                <br/>
                                <table id="columnsReview" class="table table-bordered table-striped table-hover table-condition table-center">
                                    <tr>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="showConditions">
                        <div class="panel panel-default">
                            <div class="clearfix"></div>
                            <form id="conditionForm">
                                <div class="modal-body form-horizontal">
                                    <div class="form-group"><label class="col-sm-3 control-label text-right">用户编号：</label>

                                        <div class="col-sm-4"><input type="text" class="form-control" id="user_code"
                                                                     name="user_code" placeholder="请输入用户编号"></div>
                                    </div>
                                    <div class="form-group"><label class="col-sm-3 control-label text-right">用户名称：</label>

                                        <div class="col-sm-4"><input type="text" class="form-control" id="user_name"
                                                                     name="user_name" placeholder="请输入用户名称"></div>
                                    </div>
                                    <div class="form-group"><label class="col-sm-3 control-label text-right">性别：</label>

                                        <div class="col-sm-4"><select class="form-control" id="sex" name="sex">
                                            <option value="">全部</option>
                                            <option value="1">男</option>
                                            <option value="2">女</option>
                                        </select></div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i>&nbsp;&nbsp;关闭
                </button>
                <button type="button" class="btn btn-primary" id="query"><i
                        class="fa fa-search"></i>&nbsp;&nbsp;执行查询
                </button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var sex = {1: '男', 2: '女'};
    var degree = {1: '小学', 2: '初中', 3: '高中', 4: '中专', 5: '大学', 6: '硕士', 7: '博士', 8: '其他'};

    var allColumns = {
    user_code:{
        id: 'user_code',
                title: '用户编号',
            type: 'string',
            columnClass: 'text-center',
            fastQuery: true,
            fastQueryType: 'eq'
    },
            user_name:{
        id: 'user_name',
        title: '用户名称',
        type: 'string',
        columnClass: 'text-center',
        fastQuery: true,
        fastQueryType: 'lk'
    }, sex:{
        id: 'sex',
        title: '性别',
        type: 'string',
        codeTable: sex,
        columnClass: 'text-center',
        hideType: 'xs',
        fastQuery: true,
        fastQueryType: 'eq',
        resolution: function (value, record, column, grid, dataNo, columnNo) {
            var content = '';
            if (value == 1) {
                content += '<span style="background:#00a2ca;padding:2px 10px;color:white;">Male</span>';
            } else {
                content += '<span style="background:#c447ae;padding:2px 10px;color:white;">Female</span>';
            }
            return content;
        }
    }, salary:{
        id: 'salary',
        title: '薪水',
        type: 'number',
        format: '#,###.00',
        columnClass: 'text-center',
        hideType: 'xs',
        fastQuery: true,
        fastQueryType: 'range'
    }, degree:{
        id: 'degree',
        title: '学历',
        type: 'string',
        codeTable: degree,
        columnClass: 'text-center',
        hideType: 'sm|xs',
        fastQuery: true,
        fastQueryType: 'eq'
    }};
    var gridColumns = new Array();
    gridColumns.push(allColumns["user_code"]);
    gridColumns.push(allColumns["user_name"]);
    gridColumns.push(allColumns["sex"]);
    var gridOption = {
        lang: 'zh-cn',
        ajaxLoad: true,
        loadURL: '/zjabank/server/charts/grid',
        exportFileName: '用户列表',
        columns: gridColumns,
        gridContainer: 'gridContainer',
        toolbarContainer: 'gridToolBarContainer',
        tools: '',
        pageSize: 10,
        pageSizeLimit: [10, 20, 50]
    };
    var grid = $.fn.dlshouwen.grid.init(gridOption);
    $(function () {
        grid.load();
    });
    //自定义查询按钮绑定事件
    $('#customeQueryBtn').click(function () {
        $('#myModal').modal('show');
    });
    //生成对话框
    var columnsTmpl = doT.template($('#columnsTmpl').html());
    $('#columnsShow').prepend(columnsTmpl(allColumns));
    //显示字段预览
    $('input[name="columns"]').click(function () {
        if($(this).prop('checked')){
            $('#columnsReview').find('tr').append('<th id="'+$(this).prop('id')+'_th">'+$(this).parent().text().trim()+'</th>');
        }else{
            $('#'+$(this).prop('id')+'_th').remove();
        }
    });
    //执行查询按钮绑定事件
    $('#query').click(function () {
        var flag = false;
        var columnArr = new Array();
        var condition = {};
        $("input[name='columns']").each(function(){
            if($(this).prop('checked')){
                columnArr.push(allColumns[$(this).prop('id')]);
                flag = true;
            }
        });
        $('#showConditions').find('input').each(function(){
            condition[$(this).prop('name')] = $(this).val();
        });
        if(!flag){
            alert('请选择显示字段');
        }else{
            gridOption.columns = columnArr;
            $('#dlshouwen_grid_'+grid.option.id).remove();
            grid = $.fn.dlshouwen.grid.init(gridOption);
//            grid.fastQueryParameters = condition;
            grid.doFastQuery(document.getElementById('conditionForm'))
            grid.load();
            $('#myModal').modal('hide');
        }
    });
</script>
</body>

</html>
